<template>
  <!-- 首页 -->
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="box">
        <div class="box-in">
          <img src="@/assets/404_images/1.png" alt="" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" />
          <div>
            <p>用户数量</p>
            <p>{{ this.data.userTotal }}</p>
          </div>
        </div>
        <div class="box-in">
          <img src="@/assets/404_images/2.png" alt="" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" />
          <div>
            <p>商品数量</p>
            <p>{{ this.data.goodsTotal }}</p>
          </div>
        </div>
        <div class="box-in">
          <img src="@/assets/404_images/3.png" alt="" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" />
          <div>
            <p>货品数量</p>
            <p>{{ this.data.productTotal }}</p>
          </div>
        </div>
        <div class="box-in">
          <img src="@/assets/404_images/4.png" alt="" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" />
          <div>
            <p>订单数量</p>
            <p>{{ this.data.orderTotal }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { shouye } from "@/api/shouye"
export default {
  // name: '首页',
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      imgsrc1: "/static/img/用户.9412bacc.png",
      data: {}
    };
  },
  methods: {
    handleMouseEnter() {
      //console.log("鼠标进入");
      this.imgsrc1 = "/static/img/行政部.d7cef485.png";
    },
    handleMouseLeave() {
      //console.log("鼠标离开");
      this.imgsrc1 = "/static/img/用户.9412bacc.png";
    },
  },
  created() {
    shouye().then((res) => {
      if (res.errmsg == "成功") {
        this.data = res.data
      }
      console.log(res);
    });
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  background-color: #eff1f4;
}

.dashboard-text {
  background-color: #eff1f4;
  padding: 50px 20px;
}

.box-in {
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;

  img {
    width: 60px;
    height: 60px;
  }

  p {
    font-size: 15px;
  }

  p:nth-child(1) {
    color: #979997;
    font-weight: bold;
  }

  background-color: #fff;
}

.box {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  justify-content: space-around;
}
</style>
